<template>
  <!-- 新闻卡片容器：通过动态类名区分置顶/非置顶样式 -->
  <view class="news-card" :class="{ 'is-top': news.isTop }" @click="handleClick">
    <!-- 1. 置顶标识：仅当isTop为true时显示 -->
    <view class="top-tag" v-if="news.isTop">置顶</view>

    <!-- 2. 新闻标题：置顶标题加粗 -->
    <view class="news-title" :class="{ 'top-title': news.isTop }">{{ news.title }}</view>

    <!-- 3. 新闻摘要：最多显示2行，超出省略 -->
    <view class="news-desc">{{ news.desc }}</view>

    <!-- 4. 新闻底部信息：时间+来源 -->
    <view class="news-footer">
      <text class="news-time">{{ news.time }}</text>
      <text class="news-source">{{ news.source }}</text>
    </view>
  </view>
</template>

<script>
export default {
  // 组件名称（必须与文件名一致，便于识别）
  name: "TopNewsCard",
  // 通过props接收父组件传递的单条新闻数据
  props: {
    news: {
      type: Object, // 数据类型为对象
      required: true, // 必须传递该数据，否则报错（确保数据存在）
      // 定义默认结构（防止父组件未传全字段时出错）
      default: () => ({
        isTop: false, // 是否置顶
        title: "", // 标题
        desc: "", // 摘要
        time: "", // 时间
        source: "" // 来源
      })
    }
  },
  methods: {
    // 卡片点击事件：点击时提示新闻信息（可扩展为跳转详情页）
    handleClick() {
      uni.showToast({
        title: `点击了${news.isTop ? '置顶' : ''}新闻：${news.title}`,
        icon: "none", // 不显示图标，只显示文字
        duration: 2000 // 提示时长2秒
      });
    }
  }
};
</script>

<style scoped>
/* 卡片基础样式 */
.news-card {
  width: 92%; /* 宽度占屏幕92% */
  margin: 15rpx auto; /* 上下间距15rpx，左右居中 */
  padding: 20rpx; /* 内边距 */
  background-color: #fff; /* 白色背景 */
  border-radius: 10rpx; /* 圆角 */
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); /* 轻微阴影 */
  border-left: 6rpx solid #eee; /* 左侧灰色边框（默认） */
}

/* 置顶卡片特殊样式：左侧红色边框 */
.is-top {
  border-left-color: #ff4d4f; /* 红色边框标识置顶 */
}

/* 置顶标签样式 */
.top-tag {
  display: inline-block; /* 行内块元素，方便设置边距 */
  padding: 4rpx 12rpx; /* 内边距 */
  margin-bottom: 10rpx; /* 与标题的间距 */
  background-color: #ff4d4f; /* 红色背景 */
  color: #fff; /* 白色文字 */
  font-size: 22rpx; /* 小字体 */
  border-radius: 4rpx; /* 圆角 */
}

/* 新闻标题样式 */
.news-title {
  font-size: 28rpx; /* 标题字体大小 */
  color: #333; /* 深灰色文字 */
  margin-bottom: 12rpx; /* 与摘要的间距 */
  line-height: 40rpx; /* 行高，避免文字拥挤 */
}

/* 置顶标题加粗 */
.top-title {
  font-weight: bold;
}

/* 新闻摘要样式 */
.news-desc {
  font-size: 24rpx; /* 摘要字体稍小 */
  color: #666; /* 中灰色文字 */
  line-height: 36rpx; /* 行高 */
  margin-bottom: 15rpx; /* 与底部信息的间距 */
  display: -webkit-box; /* 以下3行实现文字超出2行省略 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 底部信息容器：时间和来源左右分布 */
.news-footer {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 两端对齐 */
  font-size: 22rpx; /* 小字体 */
  color: #999; /* 浅灰色文字 */
}
</style>